import { View, Text } from "@tarojs/components"
import { useReady, useRouter } from "@tarojs/taro"
import { useState } from "react"
import { formatChargeTimetoText, hideLoading, parseTime, showLoading, showModal } from "../../../../utils"
import { queryChargeLogByOrderIdApi, queryChargeLogPowerApi } from "../../../../services/ChargeLog"

import F2Canvas from '../../../../assets/j-canvas'
import {Chart} from "@antv/f2/lib/core"

import '@antv/f2/lib/geom/line'
import '@antv/f2/lib/geom/point'

import Tooltip from '@antv/f2/lib/plugin/tooltip'

import './index.scss'

export default () => {
    const query = useRouter().params
    const orderId = query.orderId as string

    let [powerData, setpowerData] = useState<{updateTime:string; power:number}>()
    let [showPowerChart, setshowPowerChart] = useState(false)
    const [order, setorder] = useState<ChargeOrder>()

    async function queryChargeLogPower() {
        showLoading()
        const data = await queryChargeLogPowerApi(orderId)
        hideLoading()

        if(data) {
            data.forEach(item => {
                item.updateTime = parseTime(item.updateTime, '{h}:{i}:{s}')
            })
            setpowerData(data)
        }
        
        setshowPowerChart(true)
    }

    const onInit = (config) => {
        Chart.plugins.register([Tooltip]);
        const chart = new Chart(config);
    
        chart.source(powerData,
                {
                power: {
                    min: 0,
                    formatter(v) {
                        return v + 'W'
                    }
                },
                updateTime: {
                    tickCount: 5
                }  
            }  
        );

        chart.tooltip({
            custom: true,
            showXTip: true,
            showYTip: true,
            snap: true,
            crosshairsType: 'xy',
            crosshairsStyle: {
              lineDash: [ 2 ]
            }
        });

        chart.axis('date', {
            label: function label(text, index, total) {
                const textCfg:any = {};
                if (index === 0) {
                    textCfg.textAlign = 'left';
                } else if (index === total - 1) {
                    textCfg.textAlign = 'right';
                }
                return textCfg;
            }
        });
        chart.line().position('updateTime*power');
        chart.render();
        return chart
      }

    useReady(async () => {
        showLoading()
        const result = await queryChargeLogByOrderIdApi(orderId)
        hideLoading()
        if(!result.success) {
            showModal(result.msg)
            return
        }
        let data = result.data
        if(data) {
            setorder(result.data)
        }
    })

    return <View>
        {order &&
        <>
            <View className='module'>
                <View className='row'>
                    <Text>订单号</Text>
                    <Text className='pull-right' user-select>{order.orderNo}</Text>
                </View>
                <View className='row'>
                    <Text>设备号</Text>
                    <View className='pull-right'><Text user-select>{order.deviceId}</Text> #{order.portNo}</View>
                </View>
            </View>
            <View className='module m-t-10'>
                <View className='row'>
                    <Text>下单时间</Text>
                    <Text className='pull-right'>{parseTime(order.createTime)}</Text>
                </View>
                <View className='row'>
                    <Text>结束时间</Text>
                    <View className='pull-right'><Text>{parseTime(order.endTime)}</Text></View>
                </View>
                {order.stopReasonText &&
                    <View className='row'>
                        <Text>结束充电原因</Text>
                        <View className='pull-right'><Text>{order.stopReasonText}</Text></View>
                    </View>
                }
            </View>
            <View className='module m-t-10'>
                <View className='row'>
                    <Text>预付金额</Text>
                    <Text className='pull-right color-bd1c1c'>{order.chargeAmount}元</Text>
                </View>
                {order.chargeData &&
                    <>
                    <View className='row'>
                        <Text>实际充电时长</Text>
                        <Text className='pull-right color-bd1c1c'>{formatChargeTimetoText(Math.ceil(order.chargeData.consumeTime))}</Text>
                    </View>
                    <View className='row'>
                        <Text>实际耗电量</Text>
                        <Text className='pull-right color-bd1c1c'>{order.chargeData.consumeEnergy.toFixed(10)}度</Text>
                    </View>
                    </>
                }
                <View className='row'>
                    <Text>实付金额</Text>
                    <Text className='pull-right color-bd1c1c'>{order.consumeAmount}元</Text>
                </View>
            </View>
            <View className='module m-t-10'>
                
                {!showPowerChart
                ?   <View className='row'>
                        <Text className='color-0265ff' onClick={queryChargeLogPower}>点击查看功率图</Text>
                    </View>
                :   <>
                    {powerData
                    ?   <View><F2Canvas className='chart' id='chart' onInit={onInit}></F2Canvas></View>
                    :   <View>无功率信息</View>
                    }
                    </>
                }
            </View>
        </>
        }
        
    </View>
}